<template>
  <div class="index">
    <!-- 导航栏 -->
    <van-nav-bar title="首页" left-text="返回" left-arrow>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="'http://localhost:3000'+image.img" />
      </van-swipe-item>
    </van-swipe>
    <van-grid>
      <van-grid-item icon="https://img.yzcdn.cn/vant/apple-1.jpg" text="限时抢购" />
      <van-grid-item icon="https://img.yzcdn.cn/vant/apple-2.jpg" text="积分商城" />
      <van-grid-item icon="https://img.yzcdn.cn/vant/apple-3.jpg" text="联系我们" />
      <van-grid-item icon="https://img.yzcdn.cn/vant/apple-3.jpg" text="商品分类" />
    </van-grid>
    <van-tabs type="card">
      <van-tab title="热门推荐">
        <van-card
          v-for="(item,index) in goodsList[0]"
          :key="index"
          :price="item.price"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="'http://localhost:3000'+item.img"
          @click="goodsinfo(item.id)"
        >
          <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template>
          <template #footer>
            <van-button type="primary" size="small" @click.stop="add(item.id)">
              <van-icon name="shopping-cart-o" />
            </van-button>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="发现新品">
        <van-card
          v-for="(item,index) in goodsList[1]"
          :key="index"
          :price="item.price"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="'http://localhost:3000'+item.img"
          @click="goodsinfo(item.id)"
        >
          <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template>
          <template #footer>
            <van-button type="primary" size="small" @click.stop="add(item.id)">
              <van-icon name="shopping-cart-o" />
            </van-button>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="所有商品">
        <van-card
          v-for="(item,index) in goodsList[2]"
          :key="index"
          :price="item.price"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="'http://localhost:3000'+item.img"
          @click-thumb="goodsinfo(item.id)"
        >
          <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template>
          <template #footer>
            <van-button type="primary" size="small" @click.stop="add(item.id)">
              <van-icon name="shopping-cart-o" />
            </van-button>
          </template>
        </van-card>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      images: [],
      goodsList: [],
      userInfo:{}
    };
  },
  created() {
     this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.getBanner();
  },
  methods: {
    getBanner() {
      this.$http.get("/getbanner/").then(res => {
        this.images = res.data.list;
      });
      this.$http.get("/getindexgoods").then(res => {
        res.data.list.forEach(item => {
          this.goodsList.push(item.content);
        });
      });
    },
    goodsinfo(id) {
      this.$router.push("/goodsinfo/" + id);
    },
    add(id) {
      
      if (JSON.parse(localStorage.getItem("userInfo"))) {
        this.$http
          .post("cartadd", { uid: this.userInfo.uid, goodsid: id, num: 1 })
          .then(res => {
            this.$toast({
              message: "添加成功",
              position: "bottom"
            });
          });
      } else {
        this.$toast.fail("请先登录");
      }
    }
  }
};
</script>
<style>
img {
  width: 100%;
  height: 200px;
}
.index .van-nav-bar {
    position: fixed;
    width: 100%;
    top: 0;
}
.van-icon-shopping-cart-o {
  font-size: 20px;
}
.van-button--small {
  padding: 0px 25px;
}
.van-grid-item__icon {
  font-size: 60px;
}
.van-grid-item__text {
  font-size: 16px;
}
.van-grid-item__icon + .van-grid-item__text {
  margin: 0;
}
</style>